<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:insert="~{import :: head}"></head>
    <meta charset="UTF-8">
    <title>动态文章</title>
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <script type="text/javascript">
        $(function () {
            tabNav("动态");

            // 分页信息
            ajaxForPageList(currentPage, pageSize);
        })

        // 点击分页按钮以后触发的动作
        function handlePaginationClick(new_page_index, pagination_container) {
            currentPage = new_page_index + 1;
            ajaxForPageList(currentPage, pageSize);
            return false;
        }

        /**
         * 分页加载
         */
        let pageSize = 20;
        let currentPage = 1;
        function ajaxForPageList(pageIndex, pageSize) {
            $.ajax({
                url: "[[@{/trends}]]",
                type: "post",
                dataType: "json",
                data: {
                    size: pageSize,
                    page: pageIndex
                },
                success: function (res) {
                    // console.info(res);
                    $("#newsTable tr:not(:first)").remove();
                    if (res["success"]) {
                        displayPages(res["totalRecord"], res["newsList"].length);
                        let trHTML = "";
                        for (let i=0; i<res["newsList"].length; i++) {
                            let id = res["newsList"][i]['id'];
                            let sticky = res["newsList"][i]['sticky'];

                            trHTML += "<tr><td>"+ res["newsList"][i]['created'] +"</td>";

                            if(sticky==1){
                                trHTML += "<td>"+ res["newsList"][i]['title'] +"<img src='[[@{/img/sticky.svg}]]' width='30px' height='30px'></td>";
                                trHTML += "<td>"+ res["newsList"][i]['queue'] +"</td>";

                                trHTML += "<td><a href='javascript:void(0)' onclick='clickUnSticky(this)' data-id='"+ id +"'>取消置顶</a>&emsp;&emsp;";
                            }else{
                                trHTML += "<td>"+ res["newsList"][i]['title'] +"</td>";
                                trHTML += "<td>"+ res["newsList"][i]['queue'] +"</td>";

                                trHTML += "<td><a href='javascript:void(0)' onclick='clickSticky(this)' data-id='"+ id +"'>置顶</a>&emsp;&emsp;&emsp;&emsp;";
                            }

                            trHTML += "<a href='[[@{/trends/edit/}]]"+ id +"'>编辑</a>" +
                                "&nbsp;&nbsp;<a href='javascript:void(0)' onclick='clickDelNews(this)' data-id='"+ id +"'>删除</a>" +
                                "</td></tr>";
                        }
                        $("#newsTable").append("<tbody>"+ trHTML +"</tbody>");
                    }
                }
            })
        }

        /**
         * 显示分页条目数量
         */
        function displayPages(total, contentCount) {

            $("#displayInfo").text("总共 "+ total +" 条记录, 当前第 "+ currentPage +" 页, 当前页 "+ contentCount +" 条记录");
            $("#Pagination").pagination(total, {
                items_per_page: pageSize,        // 每页显示多少条记录
                current_page: currentPage - 1,   // 当前显示第几页数据 currentPage - 1
                num_display_entries: 10,         // 分页显示的条目数
                next_text: "下一页",
                prev_text: "上一页",
                load_first_page: false,
                num_edge_entries: 1, // 连接分页主体，显示的条目数
                show_if_single_page: false,
                callback: handlePaginationClick
            });
        }

        /**
         * 点击删除
         */
        function clickDelNews(e) {
            let id = e.getAttribute("data-id");
            //console.info(id)
            let d = dialog({
                title: '提示',
                content: '确定要删除该动态吗?',
                okValue: '确定',
                width: '450px',
                ok: function() {
                    $.ajax({
                        // url: '/oa/trends/saveDel',
                        url: '[[@{/trends/saveDel}]]',
                        type: 'post',
                        data: {
                            newsId: id
                        },
                        dataType: 'text',
                        success: function (res) {
                            // console.info(res);
                            if (res==="success") {
                                window.location.reload();
                            } else {
                                ShowFailure("删除异常失败, 请联系管理员!");
                            }
                        }
                    })
                },
                cancelValue: '取消',
                cancel: function() {}
            });
            d.showModal();
        }

        function clickSticky(e) {
            let id = e.getAttribute("data-id");
            $.ajax({
                url: '[[@{/trends/stickyArticle}]]',
                type: 'post',
                data: {
                    id: id
                },
                dataType: 'text',
                success: function (res) {
                    if (res==="success") {
                        ajaxForPageList(currentPage, pageSize);
                    } else {
                        ShowFailure("操作失败, 请联系管理员!");
                    }
                }
            })
        }

        function clickUnSticky(e) {
            let id = e.getAttribute("data-id");
            $.ajax({
                url: '[[@{/trends/unStickyArticle}]]',
                type: 'post',
                data: {
                    id: id
                },
                dataType: 'text',
                success: function (res) {
                    if (res==="success") {
                        ajaxForPageList(currentPage, pageSize);
                    } else {
                        ShowFailure("操作失败, 请联系管理员!");
                    }
                }
            })
        }
    </script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div style="margin-top: 20px; padding: 0 10px;">
    <a type="button" class="btn btn-primary btn-sm" th:href="@{/trends/add}"> 添加 </a>
    <table id="newsTable" class="table table-striped tableTdHeight40" style="margin-top: 15px;">
        <thead>
            <tr>
                <th style="width: 200px;">创建时间</th>
                <th>标题</th>
                <th style="width: 150px;">排序</th>
                <th style="width: 300px;">操作</th>
            </tr>
        </thead>
<!--        <tr th:each="news : ${newsList}">-->
<!--            <td th:text="${news.created}"></td>-->
<!--            <td th:text="${news.title}"></td>-->
<!--            <td>-->
<!--                <a th:href="@{'/trends/edit/'+ ${news.id}}">编辑</a>-->
<!--                &nbsp;&nbsp;-->
<!--                <a href="javascript:void(0)" onclick="clickDelNews(this)" th:data-id="${news.id}">删除</a>-->
<!--            </td>-->
<!--        </tr>-->
    </table>

    <center>
        <span id="displayInfo"></span>
        <div id="Pagination"></div>
    </center>
</div>
<script th:src="@{/js/custom.js}"></script>
</body>
</html>